<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<meta name="baidu-site-verification" content="JdMif0g2tL" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>angular</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script src="js/angular.min.js" charset="utf-8"></script>
</head>
<style type="text/css" media="screen">
	*{margin:0;padding: 0;font-size: 16px;outline: none;}
	img{width: 100%;}

	.red{width: 100px;height: 100px;background: red;color: #fff;}
	.green{width: 100px;height: 100px;background: blue;color: #fff;}
	.w200{width: 200px;}
	.h300{height: 300px;}
</style>
<body ng-app="myApp">

<div ng-controller="main">
	<!--根据用户输入的文案决定展示那个 msg变量就是控制显示那个页面的变量-->
	<input type="text" ng-model="msg">
	<!--通过switch创建页面-->
	<div ng-switch on="msg">
		<h1 ng-switch-default>第一个页面</h1>
		<h2 ng-switch-when="second">第二个页面</h2>
		<h3 ng-switch-when="third">第三个页面</h3>
	</div>
</div>

<script type="text/javascript">
	var app =angular.module('myApp', []);
	//ng-switch可以控制多个页面的切换
	//on绑定一个控制变量
	//ng-switch-default设置默认页面
	//ng-switch-when当满足when条件适合，渲染页面
	//注意：不论设置多少ng-switch-when，或者，ng-switch-default，那么只能同时显示一个页面
	app.controller('main', ['$scope', function($scope){
		$scope.msg='second'
	}])
</script>
<script type="text/javascript">
	document.getElementsByTagName('html')[0].style.fontSize=window.screen.width/10+'px';
</script>
</body>
</html>
<!--应该12angular指令11 src动态绑定-->